<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../../css/mypetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="jsp/common/top"></div>
<div id="Content">
<div id="Catalog">
    <form action="/account/newAccountOK" method="post">
        <h3>User Information</h3>
        <span th:if="${session.messageAccount!=null}">
            <p style="color: red;" th:text="${session.messageAccount}"></p>
        </span>

        <table>
            <tr>
                <td>User ID:</td>
                <td>
                    <input type="text" id="username" name="username">
                    <img id="right_username"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_username"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="usernameAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>New password:</td>
                <td>
                    <input type="text" id="password" name="password">
                    <img id="right_password"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_password"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div class="gradebox" id="passbox">
                        <div class="grade all" id="one">&#x5F31;</div>
                        <div class="grade all" id="two">&#x4E2D;</div>
                        <div class="grade all" id="three">&#x5F3A;</div>
                        <div class="grade" id="four">&#x5F88;&#x5F3A;</div>
                    </div>
                    <div id="passwordAvailability"></div>
                </td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td>
                    <input type="text" id="repeatedPassword" name="repeatedPassword">
                    <img id="right_repeatedPassword"style="display:none"src="../../images/right.jpg" width="15" height="15">
                    <img id="wrong_repeatedPassword"style="display:none"src="../../images/wrong.jpg"width="15" height="15">
                    <div id="repeatedPasswordAvailability"></div>
                </td>
            </tr>
        </table>
        <div th:replace="jsp/account/includeAccountForm"></div>

<!--        <%@ include file="includeAccountFileds.jsp" %>-->

        <input type="submit" name="account" value="Save Account Information">
    </form>
</div>
</div>

</body>
</html>
<script src="../../js/Account/checkAvailability.js"></script>